<template>
    <div>
      <NavTop />
      <div style="background-color: aquamarine;width: 1000px;margin: auto;">
      <h1>商品详情</h1>
      <div class="product-details">
          <el-image
            style="width: 200px; height: 200px; "
            :src="list.img"
            :preview-src-list="list.moreImg"
            fit="cover" 
            alt="商品图片"
          />
        <div class="product-info">
          <h2>商品名称：{{ list.name }}</h2>
          <p class="product-price">商品价格：{{ list.price }}</p>
          <p class="product-onlineprice">商品优惠价格：{{ list.onlineprice }}</p>
          <p>商品数量：<button @click="decreaseNum" :disabled="num === 1">-</button>
          {{ num }}<button @click="increaseNum">+</button></p>
          <p>商品描述：{{ list.dis }}</p>
          <el-button type="primary" @click="addToCart">加入购物车</el-button>
          <el-button type="success" @click="buyNow">立即购买</el-button>
                    <div class="product-reviews">
                  <h2>用户评价</h2>
                  <div v-for="(review, index) in reviews" :key="index">
                    <p><strong>{{ review.username }}</strong>: {{ review.content }}</p>
                  </div>
                </div>
        </div>
      </div>
      </div>
    </div>
  </template>
  
  <script>
  import NavTop from '@/components/NavTop.vue';
import { userGoodsStore } from '@/store/goods';
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  export default {
    components: {
      NavTop
    },
    data() {
      return {
        num:1,
        list: [],
        store:userGoodsStore(),
        time: new Date(),
        orderID: '',
        cartData: JSON.parse(sessionStorage.getItem('cart')) || [],
        reviews: [] // 用来存储评价数据
      };
    },
    mounted() {
      this.list = this.$route.query;
      this.getReviews(); // 获取评价数据
    },
    methods: {
         getReviews() {
          // 假设这是从 API 获取的评价数据
          // 在实际应用中，这里应该是一个 API 调用
          this.reviews = [
            { username: 'aaa小图', content: '非常好的壁纸，值得购买！' },
            { username: '此剑从天上来', content: '壁纸质量一般，不推荐。' },
            // 更多评价...
          ];
        },

          decreaseNum() {
            if (this.num > 1) {
              this.num--;
                }
        },
        increaseNum() {
          this.num++;
            },
      addToCart() {
        // 这里可以添加将商品添加到购物车的逻辑
        ElMessageBox.alert('商品已加入购物车，欢迎继续选购', '温馨提示', {
                confirmButtonText: '好的，买买买'
            })
            this.store.cartAdd({
                id:this.list.id,
                name:this.list.name,
                price:this.list.price,
                onlineprice:this.list.onlineprice,
                num:this.num,
                total:this.list.onlineprice
            }) //调用状态管理中的添加购物车的方法
      },
      buyNow() {
      // 生成订单号
      this.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() +
        this.time.getDate().toString() + Math.random().toString().slice(2, 10);
      console.log(this.orderID);

      // 统计商品的总金额和总数量
      let num = 1; // 假设只购买一个商品
      let sum = parseFloat(this.list.onlineprice); // 假设使用优惠价格

      // 把相关的数据添加到store中的相关数组里
      this.store.orderAdd({
        orderID: this.orderID,
        time: this.time,
        num: num,
        sum: sum,
        isOrdered: false, // 这个变量用来记录本订单是否已经完成支付
        child: [{
          id: this.list.id,
          name: this.list.name,
          price: this.list.price,
          onlineprice: this.list.onlineprice,
          num: num,
          total: sum
        }]
      });

      // 过程性检查，订单数组是否已经传递过去
      console.log(this.store.orderData);

      ElMessageBox.alert('已加入订单，请前往订单页面付款', '温馨提示', {
        confirmButtonText: '知道了',
        callback: () => {
          ElMessage({
            type: 'info',
            message: '订单加入成功',
          });
        },
      });

      // 商品加入订单后要在购物车中进行删除
      const index = this.cartData.findIndex((item) => item.id === this.list.id);
      if (index !== -1) {
        this.cartData.splice(index, 1);
        sessionStorage.setItem('cart', JSON.stringify(this.cartData));
      }
    },
  },
};
  </script>
  
  <style scoped>
  .product-details {
    display: flex;
    padding: 20px;
    gap: 20px;
  }
  
  
  .product-info h2 {
    margin: 0;
    font-size: 24px;
  }
  
  .product-price {
    color: red;
    font-size: 20px;
    margin: 10px 0;
  }

  .product-reviews {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

.product-reviews p {
  margin: 5px 0;
}
  </style>